{% extends "siteSetting/set_base.html" %}
{% block title %}热门城市{% endblock %}
{% block head %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/city-picker.css') }}">
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <style>
        .form-control {
            width: auto;
        }
    </style>
{% endblock %}

{% block page_content %}
    <div id="hot-city">
        <h1 class="page-header">热门城市</h1>
        <form action="/setting/hot/delete" method="post" class="form-horizontal" id="form-hot-city">
<span>
<button id='id-button-city-edit' type="button" class="btn btn-primary">编辑</button>
</span>

            <button id='id-button-city-cancel' type="button" class="cancel convert-button btn btn-default">取消</button>


            <button id='id-button-city-delete' class="delete convert-button btn btn-danger" style="display: inline;">
                删除
            </button>
            <br>
            <h2>
                {% for c in citys %}

                    {{ c.city }}<span class="span-checkbox"> <input type="checkbox" name="{{ c.id }}"> | </span>

                {% endfor %}
            </h2>
        </form>

        <div class="choosecities">
            <div class="city_province">
                <div style="position: relative;"><!-- container -->
                    <input readonly type="text" data-toggle="city-picker" id="hot-city-val" placeholder="请选择省/市"
                           data-level="city">
                </div>
                <input class="btn btn-primary" type="submit" value="确定" id="add-hot-city"/>
            </div>
        </div>
    </div>

    <div id='business-city'>
    <h2 class="page-header" style="margin-top: 70px;">业务范围城市</h2>
    <form action="/setting/business/delete" method="post" class="form-horizontal" id="form-business-city">
		<span>
			<button id='id-business-city-edit' type="button" class="btn btn-primary">编辑</button>
		</span>

        <button id='id-business-city-cancel' type="button"
                class="business-cancel business-convert-button btn btn-default">取消
        </button>
        <button id='id-business-city-delete' class="business-delete business-convert-button btn btn-danger"
                style="display: inline;">删除
        </button>
        <br>
        <h2>
            {% for c in b_citys %}
                {{ c.city }}
                <span class="business-span-checkbox"> <input type="checkbox" name="{{ c.id }}"> | </span>
            {% endfor %}
        </h2>
    </form>
    <div class="choosecities">
        <div class="city_province">
            <div style="position: relative;"><!-- container -->
                <input readonly type="text" data-toggle="city-picker" id="business-city-val" placeholder="请选择省/市"
                       data-level="city">
            </div>
            <input class="btn btn-primary" type="submit" value="确定" id="add-business-city"/>
        </div>
    </div>


{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="{{ url_for('static', filename='js/city-picker.data.js') }}"></script>
    <script src="{{ url_for('static', filename='js/city-picker.min.js') }}"></script>
    <script>
        $('#hot_city').citypicker({
            level: 'city'
        });
        $('#business_city').citypicker({
            level: 'city'
        });
        $('#add-business-city').click(function () {
            if ($('#business-city-val').val().length == 0) {
                alert('城市不能为空！');
                return false;
            }
            data =  {'city': $('#business-city-val').val()};
            console.log(data);
            $.ajax({
                url: "/setting/business/save_city",
                type: "POST",
                data: data,
                dataType: "json",
                success: function (result) {
                    console.log(result);
                    alert(result["msg"]);
                    window.location.reload();
                },
                error: function (xhr, data) {
                    alert('提交出错！');
                }
            });
        });
        $('#add-hot-city').click(function () {
            if ($('#hot-city-val').val().length == 0) {
                alert('城市不能为空！');
                return false;
            }
            data =  {'city': $('#hot-city-val').val()};
            console.log(data);
            $.ajax({
                url: "/setting/hot/save_city",
                type: "POST",
                data: data,
                dataType: "json",
                success: function (result) {
                    console.log(result);
                    alert(result["msg"]);
                    window.location.reload();
                },
                error: function (xhr, data) {
                    alert('提交出错！');
                }
            });
        });
        // var
        var ajaxPost = function (url, method, form, success, error) {
            var request = {
                url: url,
                type: method,
                contentType: 'application/json',
                success: function (r) {
                    success(r);
                },
                error: function (err) {
                    r = {
                        success: false,
                        data: err
                    };
                    error(r);
                }
            };
            if (method === 'post') {
                var data = JSON.stringify(form);
                request.data = data;
            }
            $.ajax(request);
        };
        var success = function (r) {
            alert(r.message);
            // location.reload();
        };
        var error = function (err) {

        };
        var parse = function (province_jquery, city_jquery) {  {# 解析json，使两个select联动 #}
            // var select = $("select[name='province']");
            // var select_city = $("select[name='city']");
            city_jquery.empty();
            city_jquery.append('<option value="-1">--市--</option>')
            pro_val = province_jquery.val();
            var span_data = $("span.province-city-select").data('params');
            var dd = span_data['data'];
            var link = dd['link']
            var def = dd['def'];

            var city_list = link[pro_val];
            for (var city in city_list) {
                var city_name = def[city_list[city]];
                var s = '<option value="' + city_name;
                var v = '">' + city_name + '</option>';

                city_jquery.append(s + v);
            }
            ;

        }
        var showSpan = function () {
            var s = $("#id-span-checkbox");

        };

        var convertButton = function (event) {
            var self = $(event.target);
            console.log('log', self);
            self.hide();
            if (self.html() == '编辑') {
                var buttons = self.closest('div').find("button.save, button.cancel");
                for (var i = 0; i < buttons.length; i++) {
                    $(buttons[i]).show();
                }
            }
            ;
            if (self.html() == '取消') {
                self.prev().hide();
                self.prev().prev().show();
            }
            ;
        }
        var hide_section = function () {
            $.each($(".convert-button, .span-checkbox"), function () {
                $(this).hide();
                $("#id-button-city-edit").show();
            });

        };
        var hide_business = function () {
            $.each($(".business-convert-button, .business-span-checkbox"), function () {
                $(this).hide();
                $("#id-business-city-edit").show();
            })
        }
        var show_section = function () {
            $.each($(".convert-button, .span-checkbox"), function () {
                $(this).show();
            });
        };
        var bindActions = function () {
            $(".select-province").on('change', function () {
                parse($(".select-province"), $(".select-city"));
            });
            $(".business-select-province").on('change', function () {
                parse($(".business-select-province"), $(".business-select-city"));
            });
            $("#id-button-city-edit").on('click', function (event) {
                var self = $(event.target);
                self.hide();
                show_section();
            });
            $("#id-button-city-cancel").on('click', function () {
                hide_section();
            });
            $("#id-business-city-edit").on('click', function (event) {
                var self = $(event.target);
                self.hide();
                $.each($(".business-convert-button, .business-span-checkbox"), function () {
                    $(this).show();
                });
            });
            $("#id-business-city-cancel").on('click', function () {
                hide_business();
            });
        };

        var setup = function () {
            hide_section();
            hide_business();
        }
        $(document).ready(function () {
            setup();
            bindActions();
        });


    </script>
    <script>
        nav = document.getElementById("nav_hot_city");
        nav.setAttribute("class", "active");
    </script>
{% endblock %}
